<template>
   <!--banner轮播-->
                    <div class="swiper-container" ref="mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for='image in images' :key='image.id'>
                                <img :src='image.url' />
                            </div>
                           
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
</template>

<script>
import 'swiper/swiper-bundle.min.css';
import Swiper from 'swiper/swiper-bundle.min.js'
export default { 
  components: {},
  props:{
      images:{
          type:Array,
          required:true
      },
      options:Object
      
  },
  data() {
    return {
    };
  },
  computed: {},
  watch:{
    images:{
      handler(){
        this.$nextTick(()=>{
           new Swiper (this.$refs.mySwiper, {
              ...this.options,
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
              },
             
              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
          })  
        })     
      },
      deep:true,
      immediate:true
    },
    
  },
  methods: {},
  mounted() {}
};
</script>
<style scoped>
</style>